<template>
	<div class="nav">
		<div class="row border-bottom">
			<div class="row3 border-right">
				<img src="../common/img/travel.gif" class="pic">
			</div>
			<div class="row3 first-line border-right">
				<a href="#" class="item border-bottom">跟团游</a>
				<a href="#" class="item">自由行</a>
			</div>
			<div class="row3 second-line">
				<a href="#" class="item border-bottom">游轮游</a>
				<a href="#" class="item">酒店+景点</a>
			</div>
		</div>
		<div class="one-line-row">
			<div class="one-line-row-row3 travel">
				<a href="#" class="one-line-row-row3-item">出境游</a>
			</div>
			<div class="one-line-row-row3 travel">
				<a href="#" class="one-line-row-row3-item">国内游</a>
			</div>
			<div class="one-line-row-row3 travel">
				<a href="#" class="one-line-row-row3-item">周边游</a>
			</div>
		</div>
		<div class="row">
			<div class="row3 border-right">
				<img src="../common/img/plane.gif" class="pic">
			</div>
			<div class="row3 first-line border-right ticket">
				<a href="#" class="item border-bottom ">国际机票</a>
				<a href="#" class="item">汽车票+包车</a>
			</div>
			<div class="row3 second-line ticket">
				<a href="#" class="item border-bottom">火车票+抢票</a>
				<a href="#" class="item">租车+接送</a>
			</div>
		</div>
		<div class="one-line-row">
			<div class="one-line-row-row3">
				<img src="../common/img/hotel.gif" class="pic">
			</div>
			<div class="one-line-row-row3 hotel">
				<a href="#" class="one-line-row-row3-item">国际酒店</a>
			</div>
			<div class="one-line-row-row3 hotel">
				<a href="#" class="one-line-row-row3-item">当地玩乐</a>
			</div>
		</div>
		<div class="row">
			<div class="row3 first-line border-right others">
				<a href="#" class="item border-bottom">签证</a>
				<a href="#" class="item">目的地攻略</a>
			</div>
			<div class="row3 first-line border-right others">
				<a href="#" class="item border-bottom">门票</a>
				<a href="#" class="item">目的地参团</a>
			</div>
			<div class="row3 second-line others">
				<a href="#" class="item border-bottom">定制+包团</a>
				<a href="#" class="item">金融+理财</a>
			</div>
		</div>
	</div>
</template>
<script type="text/javascript">
	
</script>
<style lang="less" scoped>
	.nav{
		box-sizing: border-box;
		width: 100%;
		padding: 5px;
		background: #fff;
		.one-line-row{
			width: 100%;
			height: 50px;
			display: flex;
			border-radius: 5px;
			margin-bottom: 5px;
			.one-line-row-row3{
				flex: 1;
				text-align: center;
				.pic{
					width: 100%;
					height: 100%;
					display: block;
				}
				.one-line-row-row3-item{
					line-height: 50px;
					font-size: 16px;
					color: #fff;
				}
			}
			.hotel{
				background-color: #FF703B;
			}
			.travel{
				background-color: #10BE62;
			}
		}
		.row{
			width: 100%;
			height: 100px;
			display: flex;
			border-radius: 5px;
			margin-bottom: 5px;
			&:first-child{
				margin-bottom: 0;
			}
			.row3{
				flex: 1;
				.pic{
					width: 100%;
					height: 100%;
					display: block;
				}
			}
			.first-line,.second-line{
				background-color: #10BE62;
				display: flex;
				flex-direction: column;
				text-align: center;
				line-height: 50px;
				.item{
					flex: 1;
					font-size: 16px;
					color: #fff;
				}
			}
			.ticket{
				background-color: #4D91FF;
			}
			.others{
				background-color: #FFA100;
			}
		}
	}
</style>